<template>
  <div id="dialog">
    <div class="dialog-wrapper" v-if="open">
      <div class="dialog-body" :class="{active: isPreviewFullScreen}" :style="{width: contentWidth, height: contentHeight, top: contentTop}">
        <div class="dialog-content">
          <div class="image-box" v-if="item.type == 3">
            <img :src="fullModuleImageUrl(item.media)">
          </div>
          <div class="video-box" v-else>
            <video class="video-player"
                   :class="{active: isPreviewFullScreen}"
                   ref="positiveVideoPlayer"
                   :playsinline="true"
                   :src="fullModuleImageUrl(item.media)"
                   preload="auto"
                   autoplay="true"
                   controls
            ></video>
          </div>
        </div>
        <div class="button-bar">
          <button class="zoom-button" @click="handleFullscreen">
            <img v-if="!isPreviewFullScreen" src="@media/common/icon-zoom-out@2x.png">
            <img v-if="isPreviewFullScreen" src="@media/common/icon-zoom-in@2x.png">
          </button>
          <button class="close-button" @click="handleClose">
            <img src="@media/common/icon-close@2x.png">
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    scale: Number,
  },
  data() {
    return {
      isPreviewFullScreen: false,
      contentWidth: '1600px',
      contentHeight: '900px',
      contentTop: '160px',
      contentScale: 0.83,
    }
  },
  // 监听属性 类似于data概念
  computed: {
    open() {
      return this.$store.state.dialog.isOpenPreviewMedia
    },
    item() {
      return this.$store.state.dialog.previewMediaItem
    }
  },
  // 监控data中的数据变化
  watch: {
    scale() {
      this.updateFrame()
    },
    isPreviewFullScreen() {
      this.updateFrame()
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    updateFrame() {
      //TODO: 预览全屏
      if (this.isPreviewFullScreen) {
        this.contentHeight = '100%';
        this.contentWidth = '100%';
        this.contentTop = '0';
        
        return
      }
      this.contentHeight = 1080 * this.scale * 0.83 + 'px';
      this.contentWidth = 1920 * this.scale * 0.83 + 'px';
      this.contentTop = 1080 * this.scale * 0.17 * 0.5 + 'px';
      
    },
    fullModuleImageUrl(url) {
      
      if (url.indexOf('http') > -1) {
        return url
      }
      return `https://ydyjy-oss.oss-cn-beijing.aliyuncs.com/${url}`
    },
    handleFullscreen() {
      let element = document.documentElement;
      if (this.isPreviewFullScreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.isPreviewFullScreen = !this.isPreviewFullScreen
    },
    handleClose() {
      this.isPreviewFullScreen = false
      this.$store.commit('dialog/PREVIEW_MEDIA_OPEN', false)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
@import "@/style/scss/component/dialog/mediaDialog.scss"
</style>
